<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const organizationInfo = ref({
  orgId: '',
  name: '',
  password: '',
  cadminId: '',
  badminId: '',
  email: ''
});

const activities = ref([]);
const members = ref([]); // 新增成员列表

const fetchOrgInfo = async () => {
  const orgId = localStorage.getItem('loginId');
  try {
    // 获取组织主要信息
    const res = await axios.get(`http://localhost:8080/orgs/getStudentOrg/${orgId}`);
    if (res.data && res.data.code === 200) {
      organizationInfo.value = res.data.data;
      console.log('组织信息:', res.data.data);
    }
    // 获取组织成员列表
    const memRes = await axios.get(`http://localhost:8080/orgs/${orgId}/members`);
    if (memRes.data && memRes.data.code === 200) {
      members.value = memRes.data.data || [];
      console.log('成员列表:', memRes.data.data);
    }
    // 获取活动列表
    const actRes = await axios.get(`http://localhost:8080/orgs/${orgId}/activities`);
    if (actRes.data && actRes.data.code === 200) {
      activities.value = actRes.data.data || [];
      console.log('活动列表:', actRes.data.data);
    }
  } catch (error) {
    ElMessage.error('获取组织信息失败');
  }
};

onMounted(fetchOrgInfo);
</script>

<template>
  <div>
    <h2>组织信息</h2>
    <p><strong>组织ID：</strong>{{ organizationInfo.orgId }}</p>
    <p><strong>组织名：</strong>{{ organizationInfo.name }}</p>
    <p><strong>C级管理员ID：</strong>{{ organizationInfo.cadminId }}</p>
    <p><strong>B级管理员ID：</strong>{{ organizationInfo.badminId }}</p>
    <p><strong>邮箱：</strong>{{ organizationInfo.email }}</p>

    <p><strong>组织成员：</strong>
      <span v-if="members.length">{{ members.map(m => m.name).join('，') }}</span>
      <span v-else>无</span>
    </p>

    <h3 style="margin-top: 30px;">举办的活动列表</h3>
    <el-table :data="activities" style="width: 100%; margin-top: 10px;">
      <el-table-column prop="actId" label="活动ID" width="80" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="location" label="地点" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="point" label="分数" width="70" />
      <el-table-column prop="status" label="状态" width="100" />
    </el-table>
  </div>
</template>